<template>
  <div class="form-list-container">
    <div class="navigation-bar">
      <button
        v-for="index in 10"
        :key="index"
        @click="selectForm(index)"
        :class="{ active: selectedFormIndex === index }"
      >
        {{ index }}
      </button>
    </div>
    <div v-show="selectedFormIndex===1">表单1</div>
    <div v-show="selectedFormIndex===2">表单2</div>
    <div v-show="selectedFormIndex===3">表单3</div>
    <div v-show="selectedFormIndex===4">表单4</div>
    <div v-show="selectedFormIndex===5">表单5</div>
    <div v-show="selectedFormIndex===6">表单6</div>
    <div v-show="selectedFormIndex===7">表单7</div>
    <div v-show="selectedFormIndex===8">表单8</div>
    <div v-show="selectedFormIndex===9">表单9</div>
    <div v-show="selectedFormIndex===10">表单10</div>
    <DocxTemplateForm v-show="selectedFormIndex===1"></DocxTemplateForm>
    <DocxTemplateForm v-show="selectedFormIndex===2"></DocxTemplateForm>
    <DocxTemplateForm v-show="selectedFormIndex===3"></DocxTemplateForm>
    <DocxTemplateForm v-show="selectedFormIndex===4"></DocxTemplateForm>
    <DocxTemplateForm v-show="selectedFormIndex===5"></DocxTemplateForm>
    <DocxTemplateForm v-show="selectedFormIndex===6"></DocxTemplateForm>
    <DocxTemplateForm v-show="selectedFormIndex===7"></DocxTemplateForm>
    <DocxTemplateForm v-show="selectedFormIndex===8"></DocxTemplateForm>
    <DocxTemplateForm v-show="selectedFormIndex===9"></DocxTemplateForm>
    <DocxTemplateForm v-show="selectedFormIndex===10"></DocxTemplateForm>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import DocxTemplateForm from './DocxTemplateForm.vue';

const selectedFormIndex = ref(1);

const selectForm = (index) => {
  selectedFormIndex.value = index;
};
</script>

<style scoped>
.form-list-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.navigation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

button {
  padding: 8px 15px;
  background-color: #007BFF;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

button.active {
  background-color: #0056b3;
}
</style>
